<style>
    html,
    body {
        background: #eee;
    }

    .w-bg {
        background: #fff;
    }

    .wrap .tab {
        padding: 15px 10px 5px 10px;
        font-size: 14px;
    }

    .wrap .li {
        display: flex;
        font-size: 14px;
        margin: 0 10px;
        padding: 10px 0;
        border-bottom: 1px solid #eee;
    }

    .wrap .li .title {
        font-weight: bold;
        width: 20vw;
    }

    .wrap .li .content {
        width: calc(80vw - 20px);
    }

    .wrap .li .content input {
        width: 100%;
    }

    .wrap .li.flex-col .content {
        width: calc(100vw - 20px);
        margin-top: 10px;
    }

    .wrap .li.flex-col .content textarea {
        width: 100%;
        line-height: 25px;
        resize: none;

    }

    .tx {
        margin: 10px 0;
        border-radius: 50%;
    }
</style>
<div class="wrap" id="view" v-cloak>
    <div class="tx-wrap flex-c flex-col new-margin-tb-10">
        <div class="tx img-h" onclick="changeHeader()">
            <img v-if="!listData.head" src="../image/touxiang.png" alt="">
            <img v-if="listData.head" :src="listData.head" alt="">
        </div>
        <p class="font-ss">上传头像</p>
    </div>
    <ul class="ul w-bg">
        <li class="li">
            <div class="title">昵称</div>
            <div class="content">
                <input type="text" placeholder="请填写" v-model="listData.name">
            </div>
        </li>
        <li class="li" onclick="_showCity(1)">
            <div class="title">当前城市</div>
            <div class="content">
                <input type="text" placeholder="请选择" v-model="listData.city" readonly>
            </div>
        </li>
        <li class="li" onclick="_showCity(4)">
            <div class="title">常驻城市</div>
            <div class="content">
                <input type="text" placeholder="请选择" v-model="listData.offten_city" readonly>
            </div>
        </li>
        <li class="li" onclick="openSingle('age', 1, '年龄', [18, 101])">
            <div class="title">年龄</div>
            <div class="content">
                <input type="text" placeholder="请选择" readonly v-model="listData.age">
            </div>
        </li>
        <li class="li" onclick="openSingle('occupation', 0, '职业')">
            <div class="title">职业</div>
            <div class="content">
                <input type="text" placeholder="请选择" readonly v-model="listData.occupation">
            </div>
        </li>
        <li class="li" onclick="openFilter('dy_program')">
            <div class="title">交友节目</div>
            <div class="content">
                <input type="text" placeholder="请选择" readonly v-model="listData.dy_program">
            </div>
        </li>
        <li class="li" onclick="openFilter('dy_conditions')">
            <div class="title">约会条件</div>
            <div class="content">
                <input type="text" placeholder="请选择" readonly v-model="listData.dy_conditions">
            </div>
        </li>
    </ul>
    <p class="tab">社交账号(选填)</p>
    <ul class="ul w-bg">
        <li class="li">
            <div class="title">微信</div>
            <div class="content">
                <input type="text" placeholder="请填写" v-model="listData.wxcount">
            </div>
        </li>
        <li class="li">
            <div class="title">QQ</div>
            <div class="content">
                <input type="text" placeholder="请填写" v-model="listData.qq">
            </div>
        </li>
    </ul>
    <p class="tab">更多信息(选填)</p>
    <ul class="ul w-bg">
        <li class="li" onclick="openSingle('stature', 1, '身高', [140, 220])">
            <div class="title">身高</div>
            <div class="content">
                <input type="text" placeholder="请选择" readonly v-model="listData.stature">
            </div>
        </li>
        <li class="li" onclick="openSingle('weight', 1, '体重', [40, 100])">
            <div class="title">体重</div>
            <div class="content">
                <input type="text" placeholder="请选择" readonly v-model="listData.weight">
            </div>
        </li>
        <li class="li flex-col" style="align-items: flex-start;">
            <div class="title">个人介绍</div>
            <div class="content">
                <textarea name="" id="" placeholder="请填写" v-model="listData.self_slogan"></textarea>
            </div>
        </li>
    </ul>
    <input class="new-hide" type="file" id="head-file">
    <button class="new-submit" onclick="submit()">提交</button>
    <div class="new-hide" id="modal-wrap"></div>
</div>
<script src="../script/selectJson.js?v=1.0.1"></script>
<script src="../script/area.js?v=1.0.1"></script>
<script src="../script/user_data.js?v=1.0.1"></script>